<template>
  <div style="height:100%;"   ref="reportReviewContainer"></div>
</template>

<script>
export default {

props:["templateConf","relations","reportData","reportName"],

  data() {
    return {
      inited: false,
      global_chart: ""
    };
  },
  methods:{
      resize(){

        if(this.global_chart != ''){
          this.global_chart.resize();
        }
      },
      displayReport() {
      if (this.templateConf.templateOptionJs) {
        let optionFunc = eval("(" + this.templateConf.templateOptionJs + ")");

        let option = optionFunc(this.reportName,"", this.relations, this.reportData);

        if (!this.inited) {
          let that = this;
          this.global_chart = this.$echarts.init(this.$refs.reportReviewContainer);
          this.inited = true;

          window.addEventListener("resize", function() {
            that.global_chart.resize();
          });
        }

        if (option) {
          this.global_chart.clear();
          this.global_chart.setOption(option);
        }
      }
    }
  },
  watch:{
      reportData(nv,ov){
          this.displayReport();
      }
  }
};
</script>

<style>
</style>
